<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=bubble-gradient
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">

<head>
  <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
  <div>
    <label for="meeting">选择日期：</label>
    <input id="meeting" type="date"  onchange="upperCase(this.id)" />
</div>
<!-- 日期事件 -->
<script type="text/javascript">
  function upperCase(x) {
      var dates = document.getElementById(x).value
  }
</script>
  <div id="container" style="height: 100%"></div>

  <script src="{{ url_for('static',filename='js/pikaday_master.js') }}"></script>
  <script src="{{ url_for('static',filename='js/jquery-2.1.1.min.js') }}"></script>
  <script src="{{ url_for('static',filename='js/echarts.min.js') }}"></script>
  <script src="{{ url_for('static',filename='js/eastmoney.js') }}"></script>
  <script src="{{ url_for('static',filename='js/update.js') }}"></script>
  <script type="text/javascript">
    function set_option(data) {
      myChart.setOption({
        series: [
          {
            // name: '1990',
            data: data,
            large: false,
            type: 'scatter',
            symbolSize: function (data) {
              return Math.sqrt(data[2]) / 5e2 * 0.2;
            },
            emphasis: {
              focus: 'series',
              label: {
                show: true,
                formatter: function (param) {
                  return param.data[3];
                },
                position: 'top'
              }
            },
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(120, 36, 50, 0.5)',
              shadowOffsetY: 5,
              color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                {
                  offset: 0,
                  color: 'rgb(251, 118, 123)'
                },
                {
                  offset: 1,
                  color: 'rgb(204, 46, 72)'
                }
              ])
            }
          }
        ]
      });
    }
    // 获取数据
    function set_data(data) {
      set_option(data)
    }
  </script>

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    var option;

    option = {
      title: {
        text: 'Life Expectancy and GDP by Country',
        left: '5%',
        top: '3%'
      },
      grid: {
        left: '8%',
        top: '10%'
      },
      xAxis: {
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        }
      },
      yAxis: {
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        },
        scale: true
      },
      series: [
        {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(120, 36, 50, 0.5)',
            shadowOffsetY: 5,
            color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
              {
                offset: 0,
                color: 'rgb(251, 118, 123)'
              },
              {
                offset: 1,
                color: 'rgb(204, 46, 72)'
              }
            ])
          }
        }
      ]
    };

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
    var d = new Date();
    date = d.getFullYear() + formatZero(String(parseInt(d.getMonth()) + 1))+ formatZero(d.getDate());
    get_yesterday_zt_pool(set_data,date)
    function run() {
      get_yesterday_zt_pool(set_data,date)
    }
    auto_update(run)
  </script>
</body>
</html>